<template>
  <view class="page">
    <view class="page-ctx">
      <view class="box-item box-info">
        <view class="info-title">商品详情</view>
        <view class="products-wrap">
          <view class="product-list">
            <view
              class="product-item flex"
              v-for="(product, index) in products"
              :key="index">
              <view class="poster-box">
                <image :src="product.image" mode="aspectFill"></image>
              </view>
              <view class="info">
                <view class="title-box">
                  <view class="title ellipsis-2">
                    {{ product.title }}
                  </view>
                </view>
                <view class="t1">作品分类</view>
                <view class="t2">
                  <text>￥</text>
                  99.00
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>

      <view class="box-item box-price">
        <div class="mingxi-title">价格明细</div>

        <view class="mingxi-list">
          <view class="mingxi-item flex-between">
            <view class="label">商品总价</view>
            <view class="num">共{{ total_product_number }}件商品</view>
            <view class="value">￥{{ payInfo.goods || 0 }}</view>
          </view>
          <view class="mingxi-item flex-between">
            <view class="label">积分抵扣</view>
            <view class="num">10积分减1元</view>
            <view class="value">-￥{{ order_points_dixian_price || 0 }}</view>
          </view>
        </view>

        <view class="total-info flex-between">
          <view class="label">合计应付</view>
          <view class="value">￥ {{ order_info.price }}</view>
        </view>
      </view>

      <view class="box-item box-info">
        <view class="info-title">发票信息</view>
        <view class="order-content">
          <view class="item">
            <text class="label">发票类型：</text>
            <text class="value">
              {{ invoice_info.invoiceType == 1 ? "普通发票" : "专用发票" }}
            </text>
          </view>
          <view class="item">
            <text class="label">发票抬头：</text>
            <text class="value">
              {{ invoice_info.titleType == 1 ? "个人" : "公司" }}
            </text>
          </view>
          <view class="item" v-if="invoice_info['title']">
            <text class="label">单位名称：</text>
            <text class="value">{{ invoice_info["title"] }}</text>
          </view>
          <view class="item" v-if="invoice_info['shibiema']">
            <text class="label">纳税人识别号：</text>
            <text class="value">{{ invoice_info["shibiema"] }}</text>
          </view>
          <view class="item" v-if="invoice_info['companyAddress']">
            <text class="label">注册地址：</text>
            <text class="value">{{ invoice_info["companyAddress"] }}</text>
          </view>
          <view class="item" v-if="invoice_info['companyPhone']">
            <text class="label">注册电话：</text>
            <text class="value">{{ invoice_info["companyPhone"] }}</text>
          </view>
          <view class="item" v-if="invoice_info['bankName']">
            <text class="label">开户银行：</text>
            <text class="value">{{ invoice_info["bankName"] }}</text>
          </view>
          <view class="item" v-if="invoice_info['bankNo']">
            <text class="label">银行账户：</text>
            <text class="value">{{ invoice_info["bankNo"] }}</text>
          </view>
        </view>
      </view>

      <view class="box-item box-info">
        <view class="info-title">开票信息</view>
        <view class="order-content">
          <view class="item">
            <text class="label">开票状态：</text>
            <text
              class="value"
              :class="[invoice_info.invoiceUrl ? 'succ' : 'warn']">
              {{ invoice_info.invoiceUrl ? "已开票" : "未开票" }}
            </text>
          </view>
          <view
            class="item"
            style="display: block"
            v-if="invoice_info.invoiceUrl && fapiao_is_image">
            <view class="label">发票附件：</view>
            <view class="value">
              <view class="pic-wrap">
                <view class="pic-box" @click="doPreviewImage()">
                  <image
                    class="fapiao-image"
                    :src="invoice_info.invoiceUrl"
                    mode="aspectFit"></image>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>

    <w_bottom_safe height="160" />

    <view
      class="page-foot"
      v-if="invoice_info['invoiceUrl'] && !fapiao_is_image">
      <view class="safe-fixed-bottom">
        <view class="btns flex-between">
          <view class="btn flex-center btn-pay" @click="doDownload()">
            下载发票
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      is_test_hexiao: true, // 测试被核销
      invoiceId: "",
      orderId: "",
      info: {},
      invoice_info: {},
      order_info: {},
      payInfo: {},
      //
      products: [],
      total_product_number: 0,
      total_product_price: 0,
      order_yunfei: 0,
      order_zhekou_bili: 10, //打几折
      order_zhekou_price: 0,
      order_coupon_price: 0,
      total_order_price: 0, //合计订单金额

      order_points_dixian_price: 0,

      fapiao_is_image: true,
    };
  },
  computed: {},
  onLoad(option) {
    this.invoiceId = option.invoiceId;
    this.orderId = option.orderId;
    this.setView();
  },
  onShow() {},
  onHide() {},
  methods: {
    setView() {
      this.query_order();
      this.query_invoice();
    },
    query_invoice() {
      this.$api({
        url: "/service.php",
        method: "get",
        data: {
          action: "invoices_detail",
          id: this.invoiceId,
        },
      }).then((res) => {
        if (res.code == 200) {
          let data = res.data;
          this.info = data;
          this.invoice_info = data;
          this.products = JSON.parse(data.info);

          this.fapiao_is_image = this.isImageUrl(data.invoiceUrl || "");
        }
      });
    },

    query_order() {
      this.$api({
        url: "/service.php",
        method: "get",
        data: {
          action: "orders_detail",
          id: this.orderId,
        },
      }).then((res) => {
        if (res.code == 200) {
          let data = res.data;
          this.order_info = data;
          this.payInfo = data.payInfo;

          this.products = data.products;
          this.products.forEach((v) => {
            this.total_product_number += parseInt(v.num);
          });
        }
      });
    },

    isImageUrl(url = "") {
      // 定义一个包含图片扩展名的数组
      const imageExtensions = ["jpg", "jpeg", "png", "gif", "bmp", "svg"];

      // 获取URL的最后一个部分（通常是文件名），然后检查其扩展名是否在数组中
      const extension = url.split(".").pop().toLowerCase();
      return imageExtensions.includes(extension);
    },

    isPdfUrl(url) {
      // 定义一个包含图片扩展名的数组
      const imageExtensions = ["pdf"];

      // 获取URL的最后一个部分（通常是文件名），然后检查其扩展名是否在数组中
      const extension = url.split(".").pop().toLowerCase();
      return imageExtensions.includes(extension);
    },

    doPreviewImage() {
      uni.previewImage({
        urls: [this.invoice_info.invoiceUrl],
      });
    },

    doDownload() {
      uni.showLoading({
        title: "下载中...",
      });
      uni.downloadFile({
        url: this.invoice_info["invoiceUrl"],
        //filePath: wx.env.USER_DATA_PATH + '/' + item.channelId + '.'+file_type,
        success: (res) => {
          console.log("downloadFile 下载文件", res);
          var filePath = res.tempFilePath;

          if (this.fapiao_is_image) {
          } else {
            uni.openDocument({
              filePath: filePath,
              showMenu: true,
              success: function (res) {
                uni.hideLoading();
                console.log("openDocument 打开文档成功 res", res);
              },
              fail: function (res) {
                uni.hideLoading();
              },
            });
          }
        },
      });

      /* uni.downloadFile({
					url: this.info.fapiao_image,
					success: (res) => {
						if (res.statusCode === 200) {
							this.$alert('下载成功')
						}
					}
				}) */
    },
  },
};
</script>

<style lang="scss">
page {
  background: #f8f8f8;
}
</style>

<style lang="scss" scoped>
.page-ctx {
  padding: 16rpx 32rpx;
}

.box-item {
  margin-bottom: 24rpx;
  padding: 34rpx 24rpx 36upx;
  background: #ffffff;
  // box-shadow: 0rpx 0rpx 16rpx 2rpx rgba(0, 0, 0, 0.08);
  border-radius: 16rpx 16rpx 16rpx 16rpx;
}

.box-status {
  .info-box {
    flex: 1;
    overflow: hidden;

    .title {
      font-family: PingFang SC, PingFang SC;
      font-weight: bold;
      font-size: 28rpx;
      color: #000000;
    }

    .tip {
      margin-top: 12rpx;
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      font-size: 20rpx;
      color: #b3b9c9;

      .tip-item {
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        font-size: 20rpx;
        color: #b3b9c9;
      }
    }
  }

  .icon-box {
    width: 72rpx;
    height: 72rpx;

    image {
      width: 72rpx;
      height: 72rpx;
    }
  }
}

.products-wrap {
  .product-list {
    .product-item {
      padding: 26rpx 0 40upx;
      align-items: flex-start;

      & + .product-item {
        border-top: 1rpx solid #eee;
      }

      .poster-box {
        width: 168rpx;
        height: 168rpx;
        background: #ffffff;
        border-radius: 8rpx 8rpx 8rpx 8rpx;

        image {
          width: 100%;
          height: 100%;
        }
      }

      .info {
        flex: 1;
        padding-left: 24rpx;

        .title-box {
        }

        .title {
          font-weight: bold;
          font-size: 28rpx;
          color: #000;
        }
        .t1 {
          font-size: 24rpx;
          color: #000000;
          margin: 8upx 0 6upx;
        }
        .t2 {
          font-weight: bold;
          font-size: 32rpx;
          color: #e23410;
          & > text {
            font-weight: 400;
            font-size: 20rpx;
          }
        }
        .desc-box {
          margin-top: 14rpx;

          .desc {
            font-family: PingFang SC, PingFang SC;
            font-weight: 400;
            font-size: 24rpx;
            color: #b3b9c9;
          }
        }

        .price-box {
          margin-top: 24rpx;

          .price-info {
            .huobi {
              font-family: PingFang SC, PingFang SC;
              font-weight: bold;
              font-size: 20rpx;
              color: #000000;
            }

            .price {
              font-family: PingFang SC, PingFang SC;
              font-weight: bold;
              font-size: 36rpx;
              color: #000000;
            }

            .unit {
              font-family: PingFang SC, PingFang SC;
              font-weight: bold;
              font-size: 20rpx;
              color: #000000;
            }
          }

          .num {
            font-family: PingFang SC, PingFang SC;
            font-weight: bold;
            font-size: 24rpx;
            color: #000000;
          }
        }
      }
    }
  }
}

// 产品评价
.product-reviews-box {
  margin-top: 24rpx;
  display: flex;
  justify-content: flex-end;

  .btns {
    flex: 1;
    display: flex;
    justify-content: flex-end;
    overflow: hidden;
    flex-wrap: wrap;

    .btn {
      margin-left: 20rpx;
      min-width: 136rpx;
      height: 48rpx;
      background: #f4f4f4;
      border-radius: 12rpx 12rpx 12rpx 12rpx;
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      font-size: 24rpx;
      color: #666666;

      &.btn-reviews {
        background: #cb0011;
        color: #ffffff;
      }
    }
  }
}

.cell-item {
  height: 108rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;

  & + .cell-item {
    border-top: 1rpx solid #eaeaea;
  }

  .label {
    padding-right: 24rpx;
    flex: 1;
    overflow: hidden;
    font-family: PingFang SC, PingFang SC;
    font-weight: bold;
    font-size: 28rpx;
    color: #333333;

    image {
      margin-right: 10rpx;
      width: 48rpx;
      height: 48rpx;
      border-radius: 8rpx;
    }

    text {
      flex: 1;
      overflow: hidden;
    }
  }

  .value-box {
    width: fit-content;

    .value {
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      font-size: 26rpx;
      color: #7d7d7d;

      &.right-padding {
        margin-right: 10rpx;
      }
    }

    image {
      width: 30rpx;
      height: 30rpx;
    }
  }
}

.box-price {
  margin-top: 24rpx;

  .mingxi-title {
    font-family: PingFang SC, PingFang SC;
    font-weight: bold;
    font-size: 28rpx;
    color: #222222;
  }

  .mingxi-list {
  }

  .mingxi-item {
    margin-top: 20rpx;

    .label {
      width: 160rpx;
      font-family: PingFang SC, PingFang SC;
      font-weight: bold;
      font-size: 24rpx;
      color: #222222;
    }

    .num {
      flex: 1;
      text-align: left;
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      font-size: 24rpx;
      color: #666666;
    }

    .value {
      font-family: PingFang SC, PingFang SC;
      font-weight: bold;
      font-size: 24rpx;
      color: #222222;
    }
  }

  .total-info {
    border-top: 1rpx solid #f3f4f8;
    margin-top: 36rpx;
    padding-top: 34rpx;

    .label {
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      font-size: 24rpx;
      color: #222222;
    }

    .value {
      font-family: PingFang SC, PingFang SC;
      font-weight: 800;
      font-size: 32rpx;
      color: #000000;
    }
  }
}

.box-pay {
  padding: 24rpx 24rpx;

  .pay-info {
    .label {
      font-family: PingFang SC, PingFang SC;
      font-weight: bold;
      font-size: 28rpx;
      color: #222222;
    }

    .value {
      image {
        margin-right: 24rpx;
        width: 40rpx;
        height: 40rpx;
      }

      text {
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        font-size: 28rpx;
        color: #000000;
      }
    }
  }
}

.box-info {
  .info-title {
    font-family: PingFang SC, PingFang SC;
    font-weight: bold;
    font-size: 28rpx;
    color: #222222;
  }

  .order-content {
    margin-top: 20rpx;

    .item {
      display: flex;
      justify-content: space-between;

      & + .item {
        margin-top: 22rpx;
      }

      .label {
        display: inline-block;
        min-width: 5em;
        font-family: PingFang SC, PingFang SC;
        font-weight: bold;
        font-size: 24rpx;
        color: #000;
      }

      .value {
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        font-size: 24rpx;
        color: #000;
      }
    }
  }
}

// 快递信息
.express-reason {
  margin-top: 10rpx;
  font-size: 24rpx;
}

.pic-wrap {
  .pic-box {
    .fapiao-image {
      width: 400rpx;
      height: 400rpx;
    }
  }
}

.page-foot {
  .btns {
    width: 100%;

    .btn {
      flex: 1;
      // width: 345rpx;
      height: 80rpx;
      background: #f49c0d;
      border-radius: 40rpx 40rpx 40rpx 40rpx;
      font-weight: 400;
      font-size: 28rpx;
      color: #ffffff;

      & + .btn {
        margin-left: 24rpx;
      }

      &.btn-pay {
        background: #f49c0d;
        color: #ffffff;
      }

      &.btn-cancel {
      }

      &.btn-refund {
      }

      &.btn-disabled {
      }

      &[disabled] {
      }
    }
  }
}
</style>
